<!-- 设置的事情 -->
<template>
    <div>
        <el-form
            ref="form"
            :model="form"
            :rules="loginRules"
            label-width="80px"
        >
            <el-form-item label="行数" prop="rowNum">
                <el-input v-model="form.rowNum"></el-input>
            </el-form-item>
            <el-form-item label="列数" prop="colNum">
                <el-input v-model="form.colNum"></el-input>
            </el-form-item>
            <el-form-item label="字体大小" prop="fontSize">
                <el-input v-model="form.fontSize"></el-input>
            </el-form-item>
            <el-form-item label="字体" prop="fontFamily">
                <el-input v-model="form.fontFamily"></el-input>
            </el-form-item>
            <el-form-item label="行限制" prop="trueRowSpace">
                <el-input v-model="form.trueRowSpace"></el-input>
            </el-form-item>
            <el-form-item label="列限制" prop="trueColSpace">
                <el-input v-model="form.trueColSpace"></el-input>
            </el-form-item>
            <el-form-item class="btns">
                <el-button type="primary" @click="setSettings">设置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    name: "Setting",
    data() {
        return {
            form: {
                rowNum: 0,
                colNum: 0,
                fontSize: 0,
                fontFamily: "宋体",
                trueRowSpace: 0,
                trueColSpace: 0,
            },
            rowSpace: 0,
            colSpace: 0,
            loginRules: {
                rowNum: [
                    {
                        required: true,
                        message: "请输入行数",
                        trigger: "blur",
                    },
                    {
                        type: "integer",
                        message: "年龄必须为数字值",
                        trigger: "change",
                        validator: (rule, value, cb) => {
                            let reg = /^[0-9]*[1-9][0-9]*$/;
                            if (!reg.test(value)) {
                                cb(new Error("请输入非零整数"));
                            } else {
                                cb();
                            }
                        },
                    },
                ],
                colNum: [
                    {
                        required: true,
                        message: "请输入行数",
                        trigger: "blur",
                    },
                    {
                        type: "integer",
                        message: "年龄必须为数字值",
                        trigger: "change",
                        validator: (rule, value, cb) => {
                            let reg = /^[0-9]*[1-9][0-9]*$/;
                            if (!reg.test(value)) {
                                cb(new Error("请输入非零整数"));
                            } else {
                                cb();
                            }
                        },
                    },
                ],
                fontSize: [
                    {
                        required: true,
                        message: "请输入字体大小",
                        trigger: "blur",
                    },
                    {
                        type: "integer",
                        message: "年龄必须为数字值",
                        trigger: "change",
                        validator: (rule, value, cb) => {
                            let reg = /^[0-9]*[1-9][0-9]*$/;
                            if (!reg.test(value)) {
                                cb(new Error("请输入非零整数"));
                            } else {
                                cb();
                            }
                        },
                    },
                ],
                fontFamily: [
                    {
                        required: true,
                        message: "请输入字体名称",
                        trigger: "blur",
                    },
                ],
                trueRowSpace: [
                    {
                        required: true,
                        message: "请输入行间距",
                        trigger: "blur",
                    },
                    {
                        type: "integer",
                        message: "年龄必须为数字值",
                        trigger: "change",
                        validator: (rule, value, cb) => {
                            let reg = /^[0-9]*[1-9][0-9]*$/;
                            if (!reg.test(value)) {
                                cb(new Error("请输入非零整数"));
                            } else if (value > this.rowSpace) {
                                cb(new Error("超过行限制值"));
                            } else {
                                cb();
                            }
                        },
                    },
                ],
                trueColSpace: [
                    {
                        required: true,
                        message: "请输入列间距",
                        trigger: "blur",
                    },
                    {
                        type: "integer",
                        message: "年龄必须为数字值",
                        trigger: "change",
                        validator: (rule, value, cb) => {
                            let reg = /^[0-9]*[1-9][0-9]*$/;
                            if (!reg.test(value)) {
                                cb(new Error("请输入非零整数"));
                            } else if (value > this.colSpace) {
                                cb(new Error("超过列限制值"));
                            } else {
                                cb();
                            }
                        },
                    },
                ],
            },
        };
    },
    created() {
        let rowNum = localStorage.getItem("rowNum");
        let colNum = localStorage.getItem("colNum");
        //字体大小
        let fontSize = localStorage.getItem("fontSize");
        //字体
        let fontFamily = localStorage.getItem("fontFamily");

        this.rowSpace = parseInt(localStorage.getItem("rowSpace"));
        this.colSpace = parseInt(localStorage.getItem("colSpace"));
        let trueRowSpace = localStorage.getItem("trueRowSpace");
        let trueColSpace = localStorage.getItem("trueColSpace");
        this.form = {
            rowNum,
            colNum,
            fontSize,
            fontFamily,
            trueRowSpace,
            trueColSpace,
        };
    },
    methods: {
        setSettings() {
            localStorage.setItem("rowNum", this.form.rowNum);
            localStorage.setItem("colNum", this.form.colNum);
            localStorage.setItem("fontSize", this.form.fontSize);
            localStorage.setItem("fontFamily", this.form.fontFamily);
            localStorage.setItem("trueRowSpace", this.form.trueRowSpace);
            localStorage.setItem("trueColSpace", this.form.trueColSpace);
        },
    },
};
</script>

<style  lang="scss" scoped>
.btns {
    display: flex;
    justify-content: flex-end;
}
</style>
